@if (!!editorService) {
  <div class="content-block">
    <keira-query-output
      [docUrl]="docUrl"
      [isNew]="editorService.isNew"
      [diffQuery]="editorService.diffQuery"
      [fullQuery]="editorService.fullQuery"
      [error]="editorService.error"
      [entityTable]="editorService.entityTable"
      [editorService]="editorService"
      (executeQuery)="save($event)"
    />
  </div>
  <div class="content-block">
    <form [formGroup]="editorService.form" class="form-group edit-form">
      <div class="row">
        <div class="form-group col-12 col-sm-6 col-md-4 col-lg-2 col-xl-2">
          <label class="control-label" for="Item">
            <keira-icon [itemId]="editorService.form.controls.Item.value" />
            Item
          </label>
          <keira-item-selector-btn
            [control]="editorService.form.controls.Item"
            [disabled]="editorService.form.controls.Item.disabled"
            [config]="{ name: 'Item' }"
          />
          <input [formControlName]="'Item'" id="Item" type="number" class="form-control form-control-sm" />
        </div>
        <div class="form-group col-12 col-sm-6 col-md-4 col-lg-2 col-xl-2">
          <label class="control-label" for="Reference">Reference</label>
          <i class="fas fa-info-circle ms-1" [placement]="'auto'" [tooltip]="'LOOT_EDITOR.REFERENCE' | translate"></i>
          <input [formControlName]="'Reference'" id="Reference" type="number" class="form-control form-control-sm" />
        </div>
        <div class="form-group col-12 col-sm-6 col-md-4 col-lg-2 col-xl-2">
          <label class="control-label" for="Chance">Chance</label>
          <i class="fas fa-info-circle ms-1" [placement]="'auto'" [tooltip]="'LOOT_EDITOR.CHANCE' | translate"></i>
          <input [formControlName]="'Chance'" id="Chance" type="number" class="form-control form-control-sm" />
        </div>
        <div class="form-group col-12 col-sm-6 col-md-4 col-lg-2 col-xl-2">
          <label class="control-label" for="QuestRequired">QuestRequired</label>
          <i class="fas fa-info-circle ms-1" [placement]="'auto'" [tooltip]="'LOOT_EDITOR.QUEST_REQUIRED' | translate"></i>
          <input [formControlName]="'QuestRequired'" id="QuestRequired" type="number" class="form-control form-control-sm" />
        </div>
        <div class="form-group col-12 col-sm-6 col-md-4 col-lg-2 col-xl-2">
          <label class="control-label" for="LootMode">LootMode</label>
          <keira-flags-selector-btn
            [control]="editorService.form.controls.LootMode"
            [disabled]="editorService.form.controls.LootMode.disabled"
            [config]="{ flags: LOOT_MODE, name: 'LootMode' }"
            [modalClass]="'modal-lg'"
          />
          <input [formControlName]="'LootMode'" id="LootMode" type="number" class="form-control form-control-sm" />
        </div>
        <div class="form-group col-12 col-sm-6 col-md-4 col-lg-2 col-xl-2">
          <label class="control-label" for="GroupId">GroupId</label>
          <i class="fas fa-info-circle ms-1" [placement]="'auto'" [tooltip]="'LOOT_EDITOR.GROUP_ID' | translate"></i>
          <input [formControlName]="'GroupId'" id="GroupId" type="number" class="form-control form-control-sm" />
        </div>
        <div class="form-group col-12 col-sm-6 col-md-4 col-lg-2 col-xl-2">
          <label class="control-label" for="MinCount">MinCount</label>
          <i class="fas fa-info-circle ms-1" [placement]="'auto'" [tooltip]="'LOOT_EDITOR.MIN_COUNT' | translate"></i>
          <input [formControlName]="'MinCount'" id="MinCount" type="number" class="form-control form-control-sm" />
        </div>
        <div class="form-group col-12 col-sm-6 col-md-4 col-lg-2 col-xl-2">
          <label class="control-label" for="MaxCount">MaxCount</label>
          <i class="fas fa-info-circle ms-1" [placement]="'auto'" [tooltip]="'LOOT_EDITOR.MAX_COUNT' | translate"></i>
          <input [formControlName]="'MaxCount'" id="MaxCount" type="number" class="form-control form-control-sm" />
        </div>
        <div class="form-group col-12 col-sm-6 col-md-4 col-lg-2 col-xl-2">
          <label class="control-label" for="Comment">Comment</label>
          <i class="fas fa-info-circle ms-1" [placement]="'auto'" [tooltip]="'LOOT_EDITOR.COMMENT' | translate"></i>
          <input [formControlName]="'Comment'" id="Comment" class="form-control form-control-sm" />
        </div>
        <div class="col-12 form-error" [hidden]="editorService.isFormIdUnique()">
          <i class="fas fa-exclamation-triangle"></i>
          <span [innerHTML]="'UNIQUE' | translate: { ENTITY_SECOND_ID_FIELD: editorService.entitySecondIdField }"></span>
        </div>
      </div>
    </form>
    <div class="row">
      <div class="col-12">
        <keira-editor-buttons
          [selectedRowId]="editorService.selectedRowId"
          (deleteSelectedRow)="editorService.deleteSelectedRow()"
          (addNewRow)="editorService.addNewRow()"
          (duplicateRow)="editorService.addNewRow(true)"
        />
        <ngx-datatable
          id="editor-table"
          class="bootstrap table table-striped text-center datatable-select datatable-icon-list mb-0"
          [rows]="editorService.newRows"
          [headerHeight]="DTCFG.headerHeight"
          [footerHeight]="DTCFG.footerHeight"
          [columnMode]="DTCFG.columnMode"
          [rowHeight]="DTCFG.rowHeightWithIcon"
          [selectionType]="DTCFG.selectionType"
          (select)="editorService.onRowSelection($event)"
          (keydown.delete)="editorService.deleteSelectedRow()"
        >
          <ngx-datatable-column [minWidth]="30" [maxWidth]="30" [sortable]="false">
            <ng-template let-row="row" ngx-datatable-cell-template>
              <i [hidden]="!editorService.isRowSelected(row)" class="fas fa-chevron-right"></i>
            </ng-template>
          </ngx-datatable-column>
          <ngx-datatable-column [minWidth]="42" [maxWidth]="42" [sortable]="false">
            <ng-template let-row="row" ngx-datatable-cell-template>
              @if (!isReference(row)) {
                <keira-icon [itemId]="row.Item" />
              }
            </ng-template>
          </ngx-datatable-column>
          <ngx-datatable-column name="Item" prop="Item" [minWidth]="80" />
          <ngx-datatable-column name="Name" [minWidth]="200" [sortable]="false">
            <ng-template let-row="row" ngx-datatable-cell-template>
              @if (!isReference(row)) {
                <span>{{ editorService.queryService.getItemNameById(row.Item) | async }}</span>
              }
              @if (isReference(row)) {
                <span class="reference">REFERENCE</span>
              }
            </ng-template>
          </ngx-datatable-column>
          <ngx-datatable-column name="Reference" prop="Reference">
            <ng-template let-row="row" ngx-datatable-cell-template>
              <span [class.reference]="isReference(row)">{{ row.Reference }}</span>
            </ng-template>
          </ngx-datatable-column>
          <ngx-datatable-column name="Chance" prop="Chance" />
          <ngx-datatable-column name="QuestRequired" prop="QuestRequired" />
          <ngx-datatable-column name="LootMode" prop="LootMode" />
          <ngx-datatable-column name="GroupId" prop="GroupId">
            <ng-template let-row="row" ngx-datatable-cell-template>
              <span class="group-{{ row.GroupId }}">{{ row.GroupId }}</span>
            </ng-template>
          </ngx-datatable-column>
          <ngx-datatable-column name="MinCount" prop="MinCount">
            <ng-template let-row="row" ngx-datatable-cell-template>
              @if (!isReference(row)) {
                <span>{{ row.MinCount }}</span>
              }
            </ng-template>
          </ngx-datatable-column>
          <ngx-datatable-column name="MaxCount" prop="MaxCount" />
        </ngx-datatable>
      </div>
    </div>
  </div>
  @for (id of referenceIds; track id) {
    <keira-reference-viewer [referenceId]="id" />
  }
}
